<!DOCTYPE HTML>
<html>
	<body>

		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3; background:green">
			Your browser does not support the canvas element.
		</canvas>
		<div id="color" style="width:10px;height:10px;background:black" />
		<text id="text" style="color:black" />
		<script type="text/javascript">
			var myCanvas = document.getElementById("myCanvas");
			var cxt = myCanvas.getContext("2d");
			cxt.fillStyle = "#FF0000";
			cxt.beginPath();
			cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
			cxt.closePath();
			cxt.fill();

			var color = document.getElementById('color');
			var text = document.getElementById('text');

			function pick(event) {
				var x = event.layerX;
				var y = event.layerY;
				var pixel = cxt.getImageData(x, y, 1, 1);
				//alert(JSON.stringify(pixel))
				var data = pixel.data;
				var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')';

				color.style.background = rgba;
				//color.textContent = rgba;
				text.textContent = JSON.stringify(pixel);
			}

			myCanvas.addEventListener('mousemove', pick);
		</script>

	</body>
</html>
